/* vim: set ft=css: */

@fg: #000;
@bg: #fff;
@err: #f88;
@border_color: #888;
@shadow_hue: (@bg * .6);


.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.drop_shadow {
  -webkit-box-shadow: 1px 1px 10px @shadow_hue;
  -moz-box-shadow: 1px 1px 10px @shadow_hue;
  box-shadow: 1px 1px 10px @shadow_hue;
  /* filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color='@shadow_hue', Positive='true') */
}

html, body {
  height: 100%;
}

img {
  vertical-align: middle;
}

body {
  font-family: 'Monaco', 'DejaVu Sans Mono', 'Consalas', monospace;
  font-size: 14pt;
  margin: 0 1em 0 0;
  padding: 0;
  background: @bg;
  color: @fg;
}

div.fold {
  padding-left: 100px;
  position:relative;
  left: -50px;
  width: 100%;
  -webkit-box-shadow: -20px 0 10px @shadow_hue inset;
  -moz-box-shadow: -20px 0 10px @shadow_hue inset;
  box-shadow: -20px 0 10px @shadow_hue inset;
}

span#cursor {
  background: @fg;
  color: @bg;
 /* border-left: solid black 3px;
  margin-left: -3px; */
}

@status_height: 2ex;

#content {
  display: block;
  margin-bottom: (@status_height + .2ex);
  height: 100%;
  overflow: auto;
}

#status {
  position:fixed;
  bottom: 0;
  width: 100%;
  height: @status_height;
  padding: .1ex 0;
  .drop_shadow;
  background: @bg;
  z-index: 2;
}
  .error {
    background: @err !important;
  }
  .attention {
    background: @fg !important;
    color: @bg;
  }


#intro {
  .rounded_corners(15px);
  position: absolute;
  overflow: auto;
  top: 50px;
  width: auto;
  background: @bg;
  color: @fg;
  .drop_shadow;
  padding: 0 15px;
  max-width: 500px;

  display: none;
  h1 {
    margin: 0;
    padding: 15px 0 5px 15px;
  }
  ul {
    margin: 0;
    padding: 0 0 10px 18px;
  }
}

#close_button {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

#menu_button {
  position: fixed;
  right: 5px;
  bottom: 0;
  font-size: smaller;
  z-index: 3;
  cursor: pointer;
}

#menu {
  display: none;

  position: fixed;
  .drop_shadow;
  padding: 10px 0;
  background: @bg;
  min-width: 250px;
  cursor: default;
  dummy {}
  li.header {
  }
  li.item {
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: .2s;
    list-style-type: none;
    padding: 2px 5px;
  }
  li.item:hover {
    background-color: @fg;
    color: @bg;
  }
  table {
    margin: 0;
    width: 100%;
  }
  tr {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  td {
    padding: 0;
    margin: 0;
  }
  td.left {
    text-align: left;
  }
  td.right {
    text-align: right;
  }
}
